<template>
  <view class="container">
    <view class="header">
      <text class="title">编辑基础信息</text>
    </view>

    <view class="form-section">
      <!-- 头像编辑 -->
      <view class="avatar-section">
        <text class="section-title">头像</text>
        <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
          <image class="avatar" :src="formData.avatar" mode="aspectFill" />
          <view class="avatar-edit">
            <uni-icons type="camera" size="20" color="#fff"></uni-icons>
          </view>
        </button>
      </view>

      <!-- 表单信息 -->
      <uni-forms ref="form" :model="formData" :rules="rules">
        <uni-forms-item name="nickname">
          <input 
            type="nickname" 
            class="nickname-input" 
            placeholder="请输入昵称"
            v-model="formData.nickname"
          />
        </uni-forms-item>

        <uni-forms-item name="phone">
          <uni-easyinput
            v-model="formData.phone"
            placeholder="请输入手机号"
            :clearable="true"
            :prefixIcon="'phone'"
          />
        </uni-forms-item>
      </uni-forms>

      <button class="save-btn" @click="saveInfo">保存修改</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

const form = ref()

// 表单数据
const formData = reactive({
  avatar: '/static/avatar.png',
  nickname: '',
  phone: ''
})

// 表单验证规则
const rules = {
  nickname: {
    rules: [
      { required: true, errorMessage: '请输入昵称' },
      { minLength: 2, maxLength: 20, errorMessage: '昵称长度在2-20个字符之间' }
    ]
  },
  phone: {
    rules: [
      { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' }
    ]
  }
}

// 选择头像
const onChooseAvatar = (e: any) => {
  console.log('头像选择结果:', e.detail)
  if (e.detail.avatarUrl) {
    formData.avatar = e.detail.avatarUrl
    uni.showToast({
      title: '头像已选择',
      icon: 'success'
    })
  }
}

// 保存信息
const saveInfo = () => {
  form.value?.validate().then((res: any) => {
    if (res.valid) {
      uni.showLoading({
        title: '保存中...'
      })

      setTimeout(() => {
        uni.hideLoading()
        
        // 更新本地存储的用户信息
        const userInfo = uni.getStorageSync('userInfo')
        userInfo.nickname = formData.nickname
        userInfo.phone = formData.phone
        userInfo.avatar = formData.avatar
        uni.setStorageSync('userInfo', userInfo)

        uni.showToast({
          title: '保存成功',
          icon: 'success'
        })

        // 返回上一页
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }, 2000)
    }
  })
}

onMounted(() => {
  // 获取当前用户信息
  const userInfo = uni.getStorageSync('userInfo')
  if (userInfo) {
    formData.avatar = userInfo.avatar || '/static/avatar.png'
    formData.nickname = userInfo.nickname || ''
    formData.phone = userInfo.phone || ''
  }
})
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 0;
}

.header {
  background-color: #fff;
  padding: 30rpx;
  text-align: center;
  border-bottom: 1rpx solid #eee;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.form-section {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
}

.avatar-section {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.avatar-wrapper {
  position: relative;
  display: inline-block;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  border: 2rpx solid #eee;
}

.avatar-edit {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40rpx;
  height: 40rpx;
  background-color: #007AFF;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid #fff;
}

.nickname-input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  font-size: 28rpx;
  background-color: #fff;
}

.save-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #007AFF;
  color: #fff;
  font-size: 32rpx;
  border-radius: 44rpx;
  margin-top: 40rpx;
  border: none;
}
</style>
